import React, { PureComponent } from 'react';
import { Card, Button, Anchor, Row, Col, Spin ,Empty} from 'antd';
// import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import HdlRemark from '@/pages/components/HdlRemark';
import downloadFile, { getFileName } from '@/utils/utils';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';
import ServiceInfor from './ServiceInfor';
import ContactPage from '../../AccuFundService/AccuServiceHandle/ContactPage';
import ContactPhone from './ContactPhone';
import ChargeInform from './ChargeInform';

const { Link } = Anchor;
const { Description } = DescriptionList;
@connect(({ career: { detail }, loading }) => ({
  detail,
  loading: loading.models.career,
}))
class DetailInfor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      conatctVisible: false,
      contactFlag: '2',
      expandConsult: false,
    };
  }

  componentDidMount() {
    const { dispatch, location } = this.props;
    this.setState({
      entryId: location.query.entryId,
    });
    dispatch({
      type: 'career/getCareer',
      payload: { entryId: location.query.entryId },
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const opermars = {
      data: {
        list: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 10,
        },
      },
      detail: {
        basicDto: {},
        chargeDto: {},
        consultRcrds: [],
        entryContRcrds: [],
        matSubmitInfos: [],
        ordHdlRemarks: [],
        sendDto: {},
        serDto: {},
        mkupPayDets: [],
      },
      careerMatInfor: {
        basicDto: {},
        chargeDto: {},
        consultRcrds: [],
        entryContRcrds: [],
        matSubmitInfos: [],
        mkupPayDets: [],
        ordHdlRemarks: [],
        sendDto: {},
        serDto: {},
        editingKey: '',
        elementArr: [],
        oldAssArr: [],
      },
      pdArrList: [],
      matPay: {},
      dictCode: [],
      proObjData: [],
      proVisible: false, // 标记问题人员弹框显隐
      index: 0,
      subObj: {},
    };

    dispatch({
      type: 'career/updateData',
      payload: opermars,
    });
  }

  // 关闭
  close = () => {
    router.goBack();
  };

  // 下载
  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: getFileName(file[1]) });
  };

  addLink = matinfo =>
    matinfo.split(',').map(item => {
      const matinfoItem = item.split('|')[1];
      const matinfoName = getFileName(matinfoItem);
      return (
        <div key={item.split('|')[0]}>
          <a onClick={() => this.downLoad(item)}>{matinfoName}</a>
        </div>
      );
    });

  commanName = item => (item.inpVal ? `${item.inpVal}` : '--');

  getVal = value => {
    if (value.inpVal) {
      if (value.inpType === 9 && value.inpVal !== '[]') {
        return this.addLink(value.inpVal);
      }
      if (value.inpType === 9 && value.inpVal === '[]') {
        return '--';
      }
      return this.commanName(value);
    }
    return '--';
  };

  // 电话联系
  submitData = operms => {
    const { entryId } = this.state;
    const values = {
      consultRcrd: {
        replyContent: operms.replyContent,
        state: operms.state,
        content: operms.content,
      },
      contactContent: operms.contactContent,
      againFlag: operms.againFlag,
      againTime: operms.againTime ? operms.againTime.format('YYYY-MM-DD') : null,
      consultRcrdFlag: operms.consultRcrdFlag,
      entryId,
    };
    this.contactport(values);
  };

  // 联系 接口
  contactport = obj => {
    const { dispatch } = this.props;
    dispatch({
      type: 'career/entryContAdd',
      payload: obj,
      callback: response => {
        if (response.success) {
          this.setState({
            conatctVisible: false,
          });
        }
      },
    });
  };

  // 电话联系
  addContact = () => {
    this.handleModalVisible(true);
    this.setState({
      expandConsult: false,
      contactFlag: false,
    });
  };

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      conatctVisible: !!flag,
    });
  };

  // 联系 取消
  conatctCancel = () => {
    this.setState({
      conatctVisible: false,
    });
  };

  // 是否显示咨询记录
  contactData = value => {
    this.setState({ contactFlag: value });
  };

  // 咨询记录弹窗
  addConsultData = expandConsult => {
    this.setState({
      expandConsult,
    });
  };

  render() {
    const { contactFlag, expandConsult, conatctVisible } = this.state;
    const { detail, loading } = this.props;
    const {
      sendDto,
      basicDto,
      serDto,
      // chargeDto,
      entryContRcrds,
      matSubmitInfos,
      ordHdlRemarks,
      // mkupPayDets,
      coltFlag,
      probDets,
    } = detail;
    // const payColumns = [
    //   {
    //     title: '产品',
    //     dataIndex: 'pdName',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //   },
    //   {
    //     title: '业务开始日期',
    //     dataIndex: 'sendBeginDate',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //   },
    // ];
    const isShowMat = () => {
      if (coltFlag) {
        if (String(coltFlag) === '1') {
          return matSubmitInfos.length ? (
            <DescriptionList style={{ marginBottom: '20px' }}>
              {matSubmitInfos.map(item => (
                <Description
                  term={item.matName}
                  style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}
                  key={item.matId}
                >
                  {this.getVal(item)}
                </Description>
              ))}
            </DescriptionList>
          ) : (
            <Empty/>
          );
        }
        return (
          <DescriptionList style={{ marginBottom: '20px' }}>
            <Description term="材料是否完整">不需要材料</Description>
          </DescriptionList>
        );
      }
      return true;
    };
    // const mkupPay = data =>
    //   data.map((item, i) => (
    //     <div>
    //       <DescriptionList key={item.mkupPayId} style={{ marginBottom: 10 }}>
    //         <Description term="补缴险种">{item.assName || '--'}</Description>
    //         <Description term="补缴开始日期">
    //           {item.beginDate ? moment(item.beginDate).format('YYYY-MM-01') : '--'}
    //         </Description>
    //         <Description term="补缴结束日期">
    //           {item.endDate ? moment(item.endDate).format('YYYY-MM-DD') : '--'}
    //         </Description>
    //         <Description term="补缴基数">{item.mkupPayBase || '--'}</Description>
    //         <Description term="补缴政策依据">{item.mkupPayPlcyName || '--'}</Description>
    //         <Description term="个人比例">{item.perProp || '--'}</Description>
    //         <Description term="企业比例">{item.comProp || '--'}</Description>
    //         <Description term="每月服务费">{item.serPrice || '--'}</Description>
    //         <Description term="代收代付费用合计">{item.payAmo || '--'}</Description>
    //         <Description term="补缴费用合计">{item.sumAmo || '--'}</Description>
    //         <Description term="是否已收费">{item.chrgFlagName || '--'}</Description>
    //         <Description term="备注">{item.remark || '--'}</Description>
    //       </DescriptionList>
    //       {mkupPayDets.length === i + 1 ? null : <Divider dashed />}
    //     </div>
    //   ));

    return (
      <PageHeaderWrapper>
        <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
          <Row style={{ textAlign: 'center' }}>
            <Col span={3}>
              <Link href="#sendInfor" title="派单信息" />
            </Col>
            <Col span={3}>
              <Link href="#basicma" title="基本信息" />
            </Col>
            <Col span={3}>
              <Link href="#socialInfor" title="社保公积金信息" />
            </Col>
            <Col span={3}>
              <Link href="#payInfor" title="收费信息" />
            </Col>
            <Col span={3}>
              <Link href="#contactInfor" title="联系记录" />
            </Col>
            <Col span={3}>
              <Link href="#materialInfor" title="材料信息" />
            </Col>
            <Col span={3}>
              <Link href="#hdlRemark" title="办理备注" />
            </Col>
            <Col span={3}>
              <Link href="#proRecording" title="问题记录" />
            </Col>
          </Row>
        </Anchor>
        <Spin tip="Loading..." spinning={loading}>
          <Card title={<span id="sendInfor">派单信息</span>}>
            <DescriptionList>
              <Description term="签约方">{sendDto.ordSndrName || '--'}</Description>
              <Description term="客户名称">{sendDto.custName || '--'}</Description>
              <Description term="所属客服"> {sendDto.creName || '--'} </Description>
              <Description term="入职任务来源">{sendDto.entrySourceName || '--'}</Description>
              <Description term="派单时间">{sendDto.sendCreTime || '--'}</Description>
              <Description term="服务类型">{sendDto.contTypeName || '--'}</Description>
            </DescriptionList>
          </Card>
          <Card title={<span id="basicma">基本信息</span>}>
            <DescriptionList>
              <Description term="姓名">{basicDto.empName || '--'}</Description>
              <Description term="证件类型">{basicDto.idType || '--'}</Description>
              <Description term="证件号">{basicDto.idCode || '--'}</Description>
              <Description term="性别">{basicDto.gender || '--'}</Description>
              <Description term="国籍">{basicDto.nation || '--'}</Description>
              <Description term="出生日期">{basicDto.birthDate || '--'}</Description>
              <Description term="电话">{basicDto.mobile || '--'}</Description>
              <Description term="邮箱">{basicDto.email || '--'}</Description>
            </DescriptionList>
          </Card>
          <Card title={<span id="socialInfor">社保公积金信息</span>}>
            <ServiceInfor serDto={serDto} />
          </Card>
          {/* <Card title={<span id="payInfor">收费信息</span>}>
            <DescriptionList>
              <Description term="入职日期">{chargeDto.entryDate || '--'}</Description>
              <Description term="是否联系员工">{chargeDto.conEmpFlag || '--'}</Description>
              <Description term="执行地区">{chargeDto.areaName || '--'}</Description>
            </DescriptionList>

            <Table
              columns={payColumns}
              dataSource={chargeDto.pdChargeDtos}
              size="middle"
              pagination={false}
              style={{ width: '70%', marginTop: 20 }}
            />
            <h3 style={{ marginTop: 30, marginBottom: 10 }}>个人补缴</h3>
            {mkupPayDets && mkupPayDets.length ? mkupPay(mkupPayDets) : '暂无数据'}
          </Card> */}
          <ChargeInform
            {...this.props}
            isDetail // 详情页
            // onMkupPayPlcy={this.onMkupPayPlcy}
            // updateChare={this.updateChare}
          />
          <Card
            title={<span id="contactInfor">联系记录</span>}
            extra={<Button onClick={this.addContact}>新增联系记录</Button>}
          >
            {entryContRcrds.length ? <ContactPage contactList={entryContRcrds} /> : <Empty/>}
          </Card>
          <Card title={<span id="materialInfor">材料信息</span>}>{isShowMat()}</Card>

          <div id="hdlRemark">
            <HdlRemark hdlRemark={ordHdlRemarks} />
          </div>
          <ProRecording proRecording={probDets} />
        </Spin>
        <ContactPhone
          empTel={basicDto.empName}
          conTel={basicDto.mobile}
          conatctVisible={conatctVisible}
          submitData={this.submitData}
          contactFlag={contactFlag}
          expandConsult={expandConsult}
          handleModalVisible={this.handleModalVisible}
          contactData={this.contactData}
          addConsultData={this.addConsultData}
        />

        <FooterToolbar>
          <Button onClick={this.close}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default DetailInfor;
